<template>
    <div class='container'>
        <t-divider layout="vertical"></t-divider>
        <t-space direction="vertical" class="vertical-demo" :size="12">
            <t-typography-title level="h1">H1. TDesign</t-typography-title>
            <t-typography-title level="h2">H2. TDesign</t-typography-title>
            <t-typography-title level="h3">H3. TDesign</t-typography-title>
            <t-typography-title level="h4">H4. TDesign</t-typography-title>
            <t-typography-title level="h5">H5. TDesign</t-typography-title>
            <t-typography-title level="h6">H6. TDesign</t-typography-title></t-space>
        <t-divider layout="vertical"></t-divider>
        <t-space direction="vertical" class="vertical-demo" :size="12">
            <t-typography-text theme="primary">TDesign (primary)</t-typography-text>
            <t-typography-text theme="secondary">TDesign (secondary)</t-typography-text>
            <t-typography-text disabled>TDesign (disabled)</t-typography-text>
            <t-typography-text theme="success">TDesign (success)</t-typography-text>
            <t-typography-text theme="warning">TDesign (warning)</t-typography-text>
            <t-typography-text theme="error">TDesign (error)</t-typography-text>
            <t-typography-text mark>TDesign (mark)</t-typography-text>
            <t-typography-text code>TDesign (code)</t-typography-text>
            <t-typography-text keyboard>TDesign (keyboard)</t-typography-text>
            <t-typography-text underline>TDesign (underline)</t-typography-text>
            <t-typography-text delete>TDesign (delete)</t-typography-text>
            <t-typography-text strong>TDesign (strong)</t-typography-text>
            <t-typography-text italic>TDesign (italic)</t-typography-text>
            <t-typography-text copyable>This is a
                copyable textsadasdasdd.</t-typography-text>
        </t-space>
        <t-divider layout="vertical"></t-divider>
        <t-space direction="vertical" class="vertical-demo" :size="12">
            <t-typography-paragraph ellipsis>{{ content
                }}</t-typography-paragraph>
            <t-typography-paragraph :ellipsis="ellipsisState1">{{ content }}</t-typography-paragraph>
            <t-typography-paragraph :ellipsis="ellipsisState2" style="width: 200px">{{ content
                }}</t-typography-paragraph>
            <t-typography-paragraph :ellipsis="ellipsisState3">
                {{
                    content
                }}</t-typography-paragraph>
        </t-space>
        <TypographyEditor />
    </div>
</template>
<script setup lang='ts'>
import { h } from 'vue';
import { ChevronDownIcon } from 'tdesign-icons-vue-next';
import TypographyEditor from '@/components/Edit/TypographyEditor.vue';
const content = `TDesign was founded with the principles of open-source collaboration from the beginning. The collaboration scheme discussion, component design, and API design, including source code, are fully open within the company, garnering widespread attention from internal developers and designers. TDesign follows an equal, open, and strict policy, regardless of the participants' roles.`;

const ellipsisState1 = {
    row: 2,
    expandable: true,
    collapsible: true,
};

const ellipsisState2 = {
    row: 1,
    tooltipProps: {
        content: 'long long long text',
        showArrow: false,
    },
};

// 使用 h() 创建 VNode
const ellipsisState3 = {
    row: 1,
    suffix: () => h(ChevronDownIcon, { size: '16px' }), // suffix 支持函数返回 VNode
    expandable: true,
    collapsible: false,
};
</script>
<style lang='scss' scoped>
.container {
    margin: 100px;
}
</style>
